<template>
	<view class="page" :style="{height: $u.sys().windowHeight + 'px'}">
		<view class="container">
			<view class="logo">LOGO</view>
			<view class="form">
				<u-form v-if="step == 1" :model="form[0]" :rules="rules[0]" ref="form0">
					<u-form-item prop="phone">
						<u-input v-model="form[0].phone" type="number" :placeholder="$t('member.login.phone')"
							border="bottom"></u-input>
					</u-form-item>
					<u-form-item prop="code">
						<u-input v-model="form[0].code" type="number" :placeholder="$t('member.register.code')"
							border="bottom">
							<template slot="suffix">
								<msg-code :phone="form.phone"></msg-code>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
				<u-form v-if="step == 2" :model="form[1]" :rules="rules[1]" ref="form1">
					<u-form-item prop="pwd">
						<u-input v-if="!isShowPwd[0]" v-model="form[1].pwd" type="password"
							:placeholder="$t('member.pwd.new')" border="bottom">
							<template slot="suffix">
								<u-icon name="eye-off" color="#B9BFCB" @click="showPwd(0)"></u-icon>
							</template>
						</u-input>
						<u-input v-else v-model="form[1].pwd" type="text" :placeholder="$t('member.pwd.new')"
							border="bottom">
							<template slot="suffix">
								<u-icon name="eye-fill" color="#B9BFCB" @click="showPwd(0)"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="confirmPwd">
						<u-input v-if="!isShowPwd[1]" v-model="form[1].confirmPwd" type="password"
							:placeholder="$t('member.pwd.confirm')" border="bottom">
							<template slot="suffix">
								<u-icon name="eye-off" color="#B9BFCB" @click="showPwd(1)"></u-icon>
							</template>
						</u-input>
						<u-input v-else v-model="form[1].confirmPwd" type="text" :placeholder="$t('member.pwd.confirm')"
							border="bottom">
							<template slot="suffix">
								<u-icon name="eye-fill" color="#B9BFCB" @click="showPwd(1)"></u-icon>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="submit">
				<u-button :loading="loading" class="btn" :text="step == 1 ? $t('c.next') : $t('c.confirm')"
					@click="submit"></u-button>
			</view>
			<view class="change">
				<text @click="goLogin">{{$t('member.go-login')}}</text>
			</view>
		</view>
		<u-toast ref="toast"></u-toast>
	</view>
</template>
<script>
	import msgCode from '@/components/msg-code.vue'
	export default {
		components: {
			msgCode
		},
		data() {
			return {
				step: 1,
				form: [{
						phone: '',
						code: ''
					},
					{
						pwd: '',
						confirmPwd: ''
					}
				],
				rules: [{
						phone: {
							type: 'number',
							required: true,
							message: this.$t('member.login.phone')
						},

						code: {
							type: 'number',
							required: true,
							message: this.$t('member.register.code')
						}
					},
					{
						pwd: {
							type: 'string',
							required: true,
							message: this.$t('member.pwd.new')
						},
						confirmPwd: {
							type: 'string',
							required: true,
							message: this.$t('member.pwd.confirm')
						}
					}
				],
				isShowPwd: [false, false],
				loading: false,
				waitCodeing: false,
				waitCodeSeconds: 60
			}
		},
		methods: {
			showPwd(index) {
				this.isShowPwd[index] = !this.isShowPwd[index]
			},
			submit() {
				if (this.step == 1) {
					this.$refs.form0.validate().then(res => {
						this.loading = true
						setTimeout(() => {
							this.loading = false
							this.step = 2
						}, 300)
					})
				} else {
					this.$refs.form1.validate().then(res => {
						this.loading = true
						this.$refs.toast.show({
							message: this.$t('member.pwd.set-success')
						})
						setTimeout(() => {
							this.goLogin()
						}, 1000)
					})
				}
			},
			goLogin() {
				uni.redirectTo({
					url: '/pages/member/login'
				})
			}
		}
	}
</script>
<style lang="scss">
	.page {
		background-color: #F5F5E8;
	}

	.container {
		width: calc(100% - 112rpx);
		margin: 0 24rpx;
		border-radius: 32rpx;
		background-color: #fff;
		padding: 32rpx;
		display: inline-flex;
		margin-top: 324rpx;
		flex-flow: column;
		align-items: center;

		.logo {
			display: flex;
			justify-content: center;
			width: 160rpx;
			height: 160rpx;
			border-radius: 32rpx;
			background-color: #033787;
			position: relative;
			top: -112rpx;
			color: #fff;
			font-size: 40rpx;
			align-items: center;
		}

		.form {
			width: 100%;
			margin-top: -80rpx;
			font-size: 28rpx;

			.send-code {
				color: #033787;
			}

			.wait-code {
				color: #B9BFCB;
			}
		}

		.submit {
			margin-top: 72rpx;
			width: 100%;
			font-weight: 600;

			.btn {
				color: #ffffff;
				height: 96rpx;
				border-radius: 48rpx;
				background-color: #033787;
				border: none;
			}
		}

		.change {
			margin-top: 43rpx;
			font-size: 26rpx;
			color: #033787;
			font-weight: 600;
		}
	}
</style>